<!-- 培训管理满意度调查 -->

<template>
    <div class="box">
        <template v-if="!disabled">
            <div class="detail">
                <el-card class="box-card">
                    <div class="title">
                        <h3>{{ detailData.className }}(培训机构名称)</h3>
                        <h3>培训管理满意度测评表</h3>
                    </div>
                    <h4>说明：</h4>
                    <div v-html="detailData.evaluationExplain"></div>

                    <el-form ref="postForm" :model="detailData" :rules="rules">
                        <table border="1" cellspacing="0" cellpadding="0">
                            <colgroup>
                                <col width="70%">
                                <col width="30%">
                            </colgroup>
                            <tr>
                                <td>测评内容</td>
                                <td colspan="5">分值</td>
                            </tr>
                            <template v-for="(item, index) in detailData.evaluationItemVO.children">
                                <tr :key="index">
                                    <td colspan="6">
                                        <h4 style="margin: 0;text-align: left;">{{ item.content }}</h4>
                                    </td>
                                </tr>
                                <tr v-for="(item1, index1) in item.children" :key="index1">
                                    <td style="text-align: left;">{{ item1.content }}</td>
                                    <td>
                                        <el-form-item label=""
                                            :prop="`evaluationItemVO.children[${index}].children[${index1}][score]`"
                                            :rules="rules.score">
                                            <el-select v-model="item1.score" placeholder="请选择" class="filter-item">
                                                <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                                                    :value="item.value" />
                                            </el-select>
                                        </el-form-item>


                                    </td>
                                </tr>
                            </template>
                            <tr>
                                <td colspan="6">
                                    <h5 style="margin: 0;text-align: left;margin-bottom: 10px;">您对此次培训的总体评价:</h5>
                                    <el-form-item label="" prop="overallEvaluation">
                                        <el-input type="textarea" :rows="2" placeholder="请输入内容"
                                            v-model="detailData.overallEvaluation">
                                        </el-input>
                                    </el-form-item>

                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <h5 style="margin: 0;text-align: left;margin-bottom: 10px;">请您提出宝贵意见和建议:</h5>
                                    <el-form-item label="" prop="commentSuggest">
                                        <el-input type="textarea" :rows="2" placeholder="请输入内容"
                                            v-model="detailData.commentSuggest">
                                        </el-input>
                                    </el-form-item>

                                </td>
                            </tr>
                        </table>
                    </el-form>
                    <div style="text-align: center;margin: 10px;"><el-button type="primary" @click="handleSave"
                            :disabled="disabled">提交</el-button></div>
                </el-card>

            </div>
        </template>
        <template v-else>
            <div class="result">
                <el-tag type="success">您已完成调查问卷!</el-tag>
            </div>
        </template>

    </div>
</template>
<script>
import { fetchDetail, fetchSave, fetchUpdata, createEvaluation, getEvaluation, getPullDownList } from "@/api/questionnaire/index.js";
export default {
    data() {
        return {
            disabled: false,
            options: [
                {
                    label: 5,
                    value: 5,
                },
                {
                    label: 4,
                    value: 4,
                },
                {
                    label: 3,
                    value: 3,
                },
                {
                    label: 2,
                    value: 1,
                },
                {
                    label: 1,
                    value: 1,
                },
            ],
            surveyList: [
                {
                    title: '一、培训课程内容满意度',
                    list: [
                        {
                            title: '1. 培训课程内容是否满足您的需求？',
                            radioList: ''
                        },
                    ]
                },
                {
                    title: '二、培训课程内容满意度',
                    list: [
                        {
                            title: '1. 培训课程内容是否满足您的需求？',
                            radioList: ''
                        },
                    ]
                },
            ],
            detailData: {
                evaluationItemVO: {
                    children: []
                },
                overallEvaluation: '',//总体评价
                commentSuggest: '',//意见和建议
            },
            formData: {
                evaluationId: this.$route.query.id,
                evaluationScoreDTOList: [
                    // {
                    //     evaluationItemId: "",//满意度调查项ID
                    //     evaluationItemScore: ""//满意度调查项得分
                    // }
                ],
                overallEvaluation: '',//总体评价
                commentSuggest: '',//意见和建议
            },
            rules: {
                overallEvaluation: [
                    { required: true, message: '总体评价不能为空！' }
                ],
                commentSuggest: [
                    { required: true, message: '意见和建议不能为空！' }
                ],
                score: [
                    { required: true, message: '请选择评分！' }
                ],
                // teachingContent: [
                //     { required: true, message: '授课内容不能为空！' }
                // ],
                // examId: [
                //   { required: true, message: '请选择试卷！' }
                // ],

            }

        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        diguiFn(arr) {
            arr.forEach(item => {
                if (item.type == 1) {
                    item.score = ''
                }
                if (item.children && item.children.length) {
                    this.diguiFn(item.children)
                }
            });
        },
        getDataDiguiFn(source, arr) {
            arr.forEach(item => {
                if (item.type == 1) {
                    source.push({
                        evaluationItemId: item.id,//满意度调查项ID
                        evaluationItemScore: item.score//满意度调查项得分
                    })
                }
                if (item.children && item.children.length) {
                    this.getDataDiguiFn(source, item.children)
                }
            });
        },
        getDetail() {
            fetchDetail(this.$route.query.id).then(res => {
                console.log(res);
                if (res.code == 200) {

                    this.diguiFn(res.data.evaluationItemVO.children)
                    this.detailData = res.data;
                    // this.detailData.overallEvaluation=''//总体评价
                    // this.detailData.commentSuggest=''//意见和建议
                    this.$nextTick(() => {
                        this.$refs.postForm.clearValidate()
                    })

                }
            })
        },
        handleSave() {
            let that = this
            this.$refs.postForm.validate((valid) => {
                if (!valid) {
                    return
                }
                // 循环拿评分放到数组里面
                this.getDataDiguiFn(this.formData.evaluationScoreDTOList, this.detailData.evaluationItemVO.children)
                this.formData.overallEvaluation = this.detailData.overallEvaluation//总体评价
                this.formData.commentSuggest = this.detailData.commentSuggest//意见和建议
                console.log(this.formData);

                fetchSave(that.formData).then((res) => {

                    if (res.code == 200) {
                        this.disabled = true
                        this.$message({
                            message: '提交成功！',
                            type: 'success'
                        })
                    }

                })


            })

        },
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    min-height: 100%;
    height: auto;
    background-color: #eee;
    box-sizing: border-box;
    font-family: '仿宋';

    .title {
        text-align: center;
    }

    h4 {
        text-align: left;
        margin: 0;
    }

    p {
        margin: 0;
        text-indent: 2em;
    }

    table {
        width: 100%;
        margin-top: 20px;

        tr {
            td {
                padding: 10px;
                text-align: center;
            }
        }
    }
}

.el-radio-group {
    display: flex;
}

@media (max-width: 750px) {
    .el-radio-group {
        flex-wrap: wrap;

        .el-radio {
            width: 100%;
            margin: 0 !important;
        }
    }
}

.detail {
    max-width: 800px;
    margin: 0 auto;
}

.result {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding-top: 20px;
    .el-tag--medium {
        height: 40px;
        line-height: 40px;
    }
}
/deep/ .el-form-item {
    margin-bottom: 0;
}
</style>